<template>
  <!-- 订单评论审核 -->
  <div class="OrderComment">
    <el-input
      v-model="Content"
      placeholder="请输入关键字"
      style="width: 240px"
      clearable
    ></el-input>
    <el-input
      v-model="OrderId"
      placeholder="请输入订单编号"
      style="width: 240px"
      clearable
    ></el-input>
    <el-select v-model="Status" placeholder="请选择状态" clearable>
      <el-option label="未审核" value="未审核"></el-option>
      <el-option label="通过" value="通过"></el-option>
      <el-option label="不通过" value="不通过"></el-option>
    </el-select>
    <el-button type="primary" @click="querySearchComment">查询</el-button>
    <el-table :data="orderCommentData" style="width: 100%">
      <!-- 序号 -->
      <el-table-column prop="id" label="序号" align="center"> </el-table-column>
      <!-- 评论内容 -->
      <el-table-column prop="content" label="评论内容" align="center">
      </el-table-column>
      <!-- 顾客编号 -->
      <el-table-column prop="customerId" label="顾客编号" align="center">
      </el-table-column>
      <!-- 订单编号 -->
      <el-table-column prop="orderId" label="订单编号" align="center">
      </el-table-column>
      <!-- 评论时间 -->
      <el-table-column prop="commentTime" label="评论时间" align="center">
        <template slot-scope="scope">
          {{ zh(scope.row.commentTime) }}
        </template>
      </el-table-column>
      <!-- 评论状态 -->
      <el-table-column prop="status" label="评论状态" align="center">
        <template slot-scope="scope">
          <el-tag
            v-if="scope.row.status == '不通过'"
            type="danger"
            disable-transitions
            >{{ scope.row.status }}</el-tag
          >
          <el-tag
            v-else-if="scope.row.status == '通过'"
            type="success"
            disable-transitions
            >{{ scope.row.status }}</el-tag
          >
          <el-tag v-else type="warning" disable-transitions>{{
            scope.row.status
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="240">
        <template slot-scope="scope">
          <el-button
            @click="deleteOrderComment(scope.row.id)"
            type="danger"
            size="small "
            >删除</el-button
          >
          <el-button
            v-if="scope.row.status == '未审核'"
            @click="noPostOrderComment(scope.row.id)"
            type="warning"
            size="small "
            >不通过</el-button
          >
          <el-button
            v-if="scope.row.status == '未审核'"
            @click="postOrderComment(scope.row.id)"
            type="success"
            size="small "
            >通过</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 底部分页区域 -->
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderCommentTotal"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { get, post } from "@/utils/request";
import moment from "moment";
export default {
  data() {
    return {
      // 订单评论数据
      orderCommentData: [],
      currentPage: 1,
      pageSize: 8,
      orderCommentTotal: 8,
      // 评论状态
      Status: "",
      // 订单编号
      OrderId: "",
      //评论内容
      Content: "",
      // 查询订单评论数据
      searchCommentData: [],
    };
  },
  computed: {},
  methods: {
    // 获取订单评论
    async getOrderCommentData() {
      let data = {
        page: this.currentPage,
        pageSize: this.pageSize,
      };
      // 获取数据
      let res = await get("/orderComment/pageQuery", {
        ...data,
        ...this.searchCommentData,
      });
      console.log({
        ...data,
        ...this.searchCommentData,
      });
      // 给订单评论数据赋值
      this.orderCommentData = res.data.list;
      //给订单评论总数赋值
      this.orderCommentTotal = res.data.total;
    },
    // 查询评论
    querySearchComment() {
      let data = {
        status: this.Status,
        content: this.Content,
        orderId: this.OrderId,
      };
      //删除空数据
      for (const key in data) {
        if (!data[key]) {
          delete data[key];
        }
      }
      this.searchCommentData = data;
      this.currentPage = 1;
      this.getOrderCommentData();
    },
    //删除订单评论
    deleteOrderComment(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let res = await get("/orderComment/deleteById", { id });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          //成功后重新刷新页面的数据
          this.getOrderCommentData();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //通过审核
    async postOrderComment(id) {
      let res = await post("/orderComment/checkPass", { id });
      this.$message({
        type: "success",
        message: res.message,
      });
      //成功后重新刷新页面的数据
      this.getOrderCommentData();
    },
    //不通过审核
    async noPostOrderComment(id) {
      let res = await post("/orderComment/checkNoPass", { id });
      this.$message({
        type: "success",
        message: res.message,
      });
      //成功后重新刷新页面的数据
      this.getOrderCommentData();
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.currentPage = 1;
      this.getOrderCommentData();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getOrderCommentData();
    },
    filterTag(value, row) {
      return row.tag === value;
    },
    // 转换时间
    zh(time) {
      return moment(parseInt(time)).format("YYYY/MM/DD hh:mm:ss");
    },
  },
  created() {
    this.getOrderCommentData();
  },
  mounted() {},
};
</script>
<style scoped>
</style>